<template>
	<div class="order-box">
		<nav-bar class="nav-bar">
			<template v-slot:default>
				定单列表
			</template>
		</nav-bar>

		<van-tabs ref="tabs" class="order-tab" @click-tab="onChangeTab">
			<van-tab title="全部"></van-tab>
			<van-tab title="待付款"></van-tab>
			<van-tab title="已支付"></van-tab>
			<van-tab title="发货"></van-tab>
			<van-tab title="交易完成"></van-tab>
			<van-tab title="过期"></van-tab>
		</van-tabs>
		<div class="content">
			<van-pull-refresh v-model="refreshing" class="order-list-refresh" @refresh="onRefresh">
				<van-list
					v-model:loading="loading"
					:finished="finished"
					finished-text="没有更多了"
					@load="onLoad"
					@offset="10"
				>
					<div v-for="(item, index) in list" :key="index" class="order-item-box" @click="goTo(item.id)">
						<van-card
							v-for="sub in item.orderDetails.data"
							:key="sub.id"
							:num="sub.num"
							:price="sub.goods.price"
							:thumb="sub.goods.cover_url"
							:title="sub.goods.title"
							desc="全场包邮"
						/>
						<div class="order-item-header">
							<span style="line-height:30px;">订单号：{{ item['order_no'] }} <br> 创建时间：{{
									item['created_at']
								}}</span>
						</div>
					</div>
				</van-list>
			</van-pull-refresh>
		</div>
	</div>
</template>

<script setup>
import {onMounted, reactive, toRefs} from "vue";
import NavBar from "@/components/common/navbar/NavBar.vue";
import {getOrderList} from "@/network/order";
import {useRouter} from "vue-router";

const state = reactive({
	loading: false,
	finished: false,
	refreshing: false,
	list: [],
	page: 1,
	totalPage: 0,
	status: 0
})
const {loading, finished, refreshing, list} = toRefs(state);
const router = useRouter()
const loadData = () => {
	getOrderList({page: state.page, status: state.status, include: 'orderDetails.goods'}).then(res => {
		state.list = state.list.concat(res.data);
		state.loading = false;

		// 获取总页数
		state.totalPage = res.meta.pagination.total_pages
		// 判断当前页数是否大于总页数，如果大于则停止加载数据
		if (state.page >= state.totalPage) {
			// 数据加载完停止滚动
			state.finished = true
		}
	})
}
const onLoad = () => {
	if (!state.refreshing && state.page < state.totalPage) {
		state.page += 1
	}

	if (state.refreshing) {
		state.list = []
		state.refreshing = false
	}
	loadData()
}
const onRefresh = () => {
	// 是否处于加载状态，加载过程中不触发load事件
	state.refreshing = true
	//清空列表数据
	state.finished = false
	// 将loading设置为true，表示处于加载状态
	state.loading = true;
	state.page = 1
	onLoad()
}
const onChangeTab = ({name}) => {
	state.status = name
	onRefresh()
}
const goTo = (id) => {
	router.push({path: '/orderDetail', query: {id}})
}
onMounted(() => {
	// 加载数据
	onLoad()
	// 清空数据
	onRefresh()
})
</script>

<style lang="scss" scoped>


.order-box {
	text-align: left;

	.order-header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
		width: 100%;
		height: 44px;
		line-height: 44px;
		padding: 0 10px;
		color: #252525;
		background: #fff;
		border-bottom: 1px solid #dcdcdc;

		.order-name {
			font-size: 14px;
		}
	}

	.order-tab {
		margin-top: 44px;
		position: fixed;
		left: 0;
		z-index: 1000;
		width: 100%;
		border-bottom: 1px solid #e9e9e9;
	}


	.content {
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll;
		padding-top: 100px;

	}

	.order-list-refresh {
		.van-card__content {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.van-pull-refresh__head {
			background: #f9f9f9;
		}

		.order-item-box {
			margin: 20px 10px;
			background-color: #FAFAFA;

			.order-item-header {
				padding: 10px 20px 0 20px;
				display: flex;
				justify-content: space-between;
			}

			.van-card {
				background-color: #FFFFFF;
				border-radius: 3px;
				margin-top: 10px;
			}
		}
	}
}
</style>
